<template>
    <div class="homeGird">
    <van-grid clickable
              square
              column-num="5"
              icon-size="45">
        <van-grid-item
                v-for="(item,index) in categoryList"
                :key="index"
                :text="item.opt_name"
                :icon="item.icon | showIcon"
                v-if="index<10"

        />
    </van-grid>
    </div>
</template>

<script>
    export default {
        name: "homeGird",
        props:["categoryList"],
        filters:{
            showIcon(v){
                if(!v){
                    return 'https://bing.ioliu.cn/v1/rand?w=80&h=80&time='+Math.random()*1000
                }
                return v
            }
        },
    }
</script>

<style lang="less" scoped>
    .homeGrid {
        min-height: 320px;
        overflow: hidden;
        margin: 20px 0 8px;
    }

        /deep/ .van-grid-item{
        margin-top:10px ;
    }
        /deep/ .van-grid-item__text {
            white-space: nowrap !important;
        }

        ::v-deep .van-grid-item__icon {
            img {
                border-radius: 10px;
            }
        }


</style>